<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>产品管理</el-breadcrumb-item>
  <el-breadcrumb-item>定期管理</el-breadcrumb-item>
</el-breadcrumb>
  <div id="TerminalSearch">
    <i class="el-icon-menu"></i><span>筛选</span>
    <!-- 搜索行 -->
      <div id="serchBox">
    <el-input v-model="input" placeholder="请输入内容" style="width:20%" class="search"></el-input>
    <span class="demonstration">创建时间</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="margin-right:10px">
    </el-date-picker>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" >清空搜索条件</el-button>
      </div>
       <i class="el-icon-menu"></i><span>定期列表</span>
       <el-table
       fixed="right"
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column
      prop="sumCount"
      label="产品ID"
      width="150">
    </el-table-column>
    <el-table-column
      prop="fname"
      label="产品名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="province"
      label="即将开售图片"
      width="150">
        <template scope="scope">
                    <img :src="scope.picUrl" width="40" height="40" class="head_pic"/>
                </template>
    </el-table-column>
    <el-table-column
      prop="city"
      label="售罄展示图片"
      width="150">
       <template scope="scope">
                    <img :src="scope.endPicUrl" width="40" height="40" class="head_pic"/>
                </template>
    </el-table-column>
    <el-table-column
      prop="purchasing"
      label="购买需求"
      width="150">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="是否明星产品"
      width="150">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="交易截止时间"
      width="150">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="最低起购金额"
      width="150">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="投资周期（天）"
      width="150">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="销售额（元）"
      width="150">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="总销量（笔）"
      width="150">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="延迟计算收益时间"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="500">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[8, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="alltotles">
    </el-pagination>
  </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return{
      currentPage4: 4,
      alltotles:0,
      value1:"",
      input:"",
      page:1,
      size:8,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
    }
  },
  created(){
    this.getAlldata()
  },
  methods:{
     async getAlldata(){
       const res = await this.api.termina.getAllfixedDeposit({
         page:this.page,
         size:this.size
       })
       if(res.code==200){
         this.tableData=res.data.list;
         this.alltotles=res.data.total
         console.log(res)
       }
    },
       handleSizeChange(val) {
        this.size=val;
        this.getAlldata()
      },
      handleCurrentChange(val) {
        this.page=val;
        this.getAlldata()
      }
  },
}
</script>

<style lang="scss" scoped>
#TerminalSearch{
  text-align: left;
  line-height: 50px;
}
#searchBox{
  text-align: left;
  .search{
    height: 90px;
  }
  button{
    margin-left: 20px;
  }
}
</style>